<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-overlay"
		:class="_classes"
		:style="_styles"
		v-if="_isShow"
		@animationend="_handleAnimationEnd"
		@tap="_handleClick"
	>
		<slot></slot>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, watch, nextTick, useAttrs } from "vue";
	import props from "./props";
	import { delay } from "@/uni_modules/pure-utils";

	// 过度状态
	const _status = ref("");
	// 显示状态
	const _isShow = ref(false);

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onClick", "onStatusChange"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 显示状态
		array.push(`pure-overlay--${_status.value}`);

		// 透明遮罩
		if (_props.transparent) array.push("pure-overlay--transparent");

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];
		return array;
	});

	// 监听外部绑定的显示状态
	watch(
		() => _props.show,
		async (newVal) => {
			// 设置为显示
			if (newVal) {
				_status.value = "";
				_isShow.value = true;

				await nextTick();
				await delay(50);
				_status.value = "enter";
			}

			// 设置为离开
			else {
				_status.value = "leave";
			}
		},
		{ immediate: true }
	);

	// 监听状态变化
	watch(_status, (newVal) => {
		_emits("onStatusChange", newVal);
	});

	// 动画结束事件
	async function _handleAnimationEnd() {
		// 进入动画执行完成
		if (_status.value === "enter") {
			return;
		}

		// 离开动画执行完成
		if (_status.value === "leave") {
			_status.value = "";
			_isShow.value = false;
			return;
		}
	}

	// 点击事件
	function _handleClick() {
		_emits("onClick");
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
